<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-11-04 13:57:43
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-11-04 15:55:55
 * @FilePath: \music-app\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="container">

    <view class="top">
      <view class="bar">
        <view
          class="tab-item"
          v-for="tab in tabs"
          :class="{ active: tab.name === currentTab }"
          @click="switchTab(tab.name)"
        >
          {{ tab.title }}
        </view>
		<Tabs>
				  <template v-slot: my>
					  <view>这是我的界面</view>
				  </template>
				  <template v-slot: music>
				  	<view>这是音乐馆界面</view>
				  </template>
				  <template v-slot:discover>
				  			  <view>这是发现界面</view>
				  </template>
		</Tabs>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "my",
      tabs: [
        {
          name: "my",
          title: "我的",
        },
        {
          name: "music",
          title: "音乐馆",
        },
        {
          name: "discover",
          title: "发现",
        },
      ],
    };
  },
  methods: {
    switchTab(tabName) {
      this.currentTab = tabName;
    },
  },
};
</script>

<style lang="scss">
.container {
  .top {
    width: 100%;
    box-sizing: border-box;
    font-size: 32rpx;
    .bar {
      display: flex;
      justify-content: center;
      line-height: 100rpx;
      background-color: #00c273;
      color: #fff;
      height: 10vh;

      .tab-item {
        margin: 0 10rpx;
      }
      .active {
        color: black;
        font-size: 45rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
